iT邦幫忙

2021 iThome 鐵人賽

DAY 22
0
Modern Web

30天肝出購物網站系列 第 22

Day22:22 - 結帳服務(6) - 前端 - 結帳 X PayPal付款

  • 分享至 

  • xImage
  •  

Helló,我是Charlie!
在Day21當中我們完成了後端的paypal sdk,在今天我們將完成前端結帳的部分。

================================◉‿◉=================================

首先是結帳的部分,在createOrder裡面的checkout新增導向approve link的程式碼:

checkout(){
  var username = window.localStorage.getItem("username")
  var token = window.localStorage.getItem("token")
  createOrderData(username,token).then((response) => {
    if(response.data.code == STATUS_OK){
      window.localStorage.setItem('orderID',response.data.data.orderid)
      window.location.href = response.data.link.approve
    }else{
      this.$fire({type:"error",text:response.data.data})
    }
  })
},

接著創立兩個vue:orderCreated跟orderCanceled,並且設立路由:

  {
    path: "/orderCreated",
    name:"createPaypalPage",
    component: orderCreated,
    meta: {
      title: "付款建立"
    }
  },
  {
    path: "/orderCanceled",
    name: "cancalOrderPage",
    component: orderCanceled,
    meta: {
      title: "付款取消"
    }
  }

接著在order.js當中,新增打capture order的API:

export function captureOrder(orderID,token){
  return axios.post(`http://${host()}:${port()}/userorder/capture/${orderID}`,{
    headers:{
      "AUTHORIZATION":token
    }
  })
}

接著修改orderCreated.vue,讓這個vue顯示付款成功或者付款失敗:

<template>
	<html lang="zh-Hant-TW">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<link rel="icon" type="image/x-con" href="@/assets/favicon.ico">
		<div id="app">
			<headerComponent></headerComponent>
			<div class="info" style="margin:0 auto;width: 50%;height: 50%;text-align: center;">
				<img :src="successImage" alt="" style="width:300px;height: 300px;">
				<h4>{{ successText }}</h4>
			</div>
		</div>
	</html>
</template>

<script>
  import { captureOrder } from '@/apis/order.js'
  import { STATUS_OK } from '@/apis/constant.js'
  export default{
    name: "orderCreated",
    components:{
      'headerComponent':() => import('@/components/header.vue')
    },
    data(){
      return {
        successImage:"",
        successText: ""
      }
    },
    created(){
      var orderid = window.localStorage.getItem("orderID")
      console.log(orderid)
      var token = window.localStorage.getItem("token")
      captureOrder(orderid,token).then((response) => {
        console.log(response)
        if(response.status == STATUS_OK){
          this.successImage = "https://i.imgur.com/mBolVrx.jpg"
          this.successText = "付款成功"
        }else{
          this.successImage = "https://i.imgur.com/EJjpUGf.png"
          this.successText = "付款失敗"
        }
      })
    }
  }
</script>

cancel的話就是固定頁面,這裡就不贅述了。

接著便可測試是否能結帳成功:

Imgur

================================◉‿◉=================================

Day22結束了!在今天我們完成了前端的付款,而明天我們將實作訂單API的部分,See ya next day!


上一篇
Day21:21 - 結帳服務(5) - 後端 - 結帳 X PayPal Python Checkout SDK
下一篇
Day23:23 - 結帳服務(7) - 後端 - 總訂單資料、訂單詳情API
系列文
30天肝出購物網站30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言